<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" />
		<link rel="stylesheet" type="text/css" media="all" href="../assets/admin/skins/default/style.css" />
		<!-- <link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}"> -->
		<script type="text/javascript" src="../assets/scripts/jquery/jquery-1.11.2.min.js" ></script>
		<script type="text/javascript" src="../assets/libs/artDialog/jquery.artDialog.js?skin=default"></script>
		<script type="text/javascript" src="../assets/libs/artDialog/artDialog.iframeTools.js"></script>
		<script type="text/javascript" src="../assets/libs/webuploader/webuploader.min.js"></script>
		<title>附件上传</title>
		<style>
		.webuploader-container {position: relative;}
		.webuploader-element-invisible {position: absolute !important;clip: rect(1px 1px 1px 1px); /* IE6, IE7 */clip: rect(1px,1px,1px,1px);}
		.webuploader-pick {position: relative;display: inline-block;cursor: pointer;background: #16a0d3;border: none;height: 32px;line-height: 32px;
			margin: 0 1px 0 0;padding: 0 20px;color: #fff;text-align: center;border-radius: 3px;overflow: hidden;font-family: "Microsoft Yahei";font-size: 12px;}
		.webuploader-pick-hover {background: #117ea6;}
		.webuploader-pick-disable {opacity: 0.6;pointer-events:none;}
		.file-list{line-height:32px;}
		.file-list thead{background:#16a0d3;color:white;}
		.file-list td{background:#fafafa;text-align:center;overflow:hidden;text-overflow : ellipsis;position:relative;}
		.file-list .bar{width:100%;height:16px;position:absolute;top:8px;left:0;background:white;border-radius:5px;box-sizing:border-box;border:solid 1px #00CC66;}
		.file-list .bar .bar-content{width:0;height:100%;background:#00CC66;}
		.file-list .bar.error{border-color:#FF6666;}
		.file-list .bar.error .bar-content{background:#FF6666;}
		</style>
	</head>
	<body class="mainbody">
		<div th:replace="common/form :: location('文件管理','新增附件')"></div>
		<div id="floatHead" class="content-tab-wrap">
		  <div class="content-tab">
		    <div class="content-tab-ul-wrap">
		      <ul>
		        <li><a class="selected" href="javascript:;">新增附件</a></li>
		      </ul>
		    </div>
		  </div>
		</div>
		<div class="tab-content">
			<dl>
				<dt>已选择列表</dt>
			    <dd style="margin-left:820px;">
			      <div id="picker">选择文件</div>
			    </dd>
			</dl>
			<table class="file-list">
				<thead>
					<tr><th width="245">文件名</th><th width="200">大小</th><th width="300">上传进度</th><th width="180">状态</th></tr>
				</thead>
				<tbody id="files">
					<tr id="nofiletips"><td colspan="4">暂未选择文件</td></tr>
				</tbody>
			</table>
			<div id="thelist" class="uploader-list"></div>
	    </div>
	    <div class="page-footer" th:fragment="footer">
		  <div class="btn-wrap" style="position:static;">
		  	<!-- <input type="button" value="选择文件" id="picker" /> -->
		    <input type="button" value="开始上传" id="btnSync" class="btn" />
		    <input type="button" value="返回列表页" class="btn yellow" onclick="javascript:history.back(-1);" />
		  </div>
		</div>
        <script>
        var md5Progress={};
        var skipCheckChunk={};
        WebUploader.Uploader.register({
            'before-send-file': 'checkfile',
            'before-send':'checkchunk',
            //'after-send-file':'postsend'
        }, {
            checkfile: function( file ) {
                var me = this,
                    owner = this.owner,
                    server = me.options.server,
                    deferred = WebUploader.Deferred();
                owner.md5File( file.source )
	                .progress(function(percentage) {
	                	var preProgress=md5Progress[file.id];
	                	if(!preProgress || percentage-preProgress>0.01){
	                		md5Progress[file.id]=percentage;
	                		$('#' + file.id).find('.state').text('正在校验文件:'+(percentage*100).toFixed(0)+'%');
	                	}
		            })
                	.fail(function() {deferred.reject();})
                    .then(function( md5 ) {
                    	me.options.formData.md5=md5;
                        $.ajax("checkFile", {
                            dataType: 'json',
                            data: {md5: md5},
                            success: function(response) {
                                if (response.exists) owner.skipFile(file);
                                else $('#' + file.id).find('.state').text('开始上传');
                                deferred.resolve();
                            }
                        });
                    });
                return deferred.promise();
            },
            checkchunk:function( block ) {
            	var me = this;
            	if(skipCheckChunk[block.file.id])return $.when();
            	console.log("checkchunk",block.chunk);
                var deferred = $.Deferred();
                $.get("checkChunk",{md5:me.options.formData.md5,chunk:block.chunk}).then(function(data) {
                    if (data.exists) {
                        deferred.reject();
                    } else {
                    	skipCheckChunk[block.file.id]=true;
                        deferred.resolve();
                    }
                });
	            return deferred.promise();
	        }
        });
        var uploader = WebUploader.create({
            // swf文件路径
            swf : '../assets/libs/webuploader/Uploader.swf',
            // 文件接收服务端。
            server : 'attach',
            chunked : true,
            threads : 1,
            pick : '#picker',
            duplicate:true,
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            //resize : false
        });

        // 当有文件被添加进队列的时候
        uploader.on('fileQueued', function(file) {
            $("#nofiletips").hide();
            $("#files").append(
            		 '<tr id="'+file.id+'">'
            			+'<td>'+file.name+'</td>'
            			+'<td>'+file.size+'</td>'
            			+'<td><div class="bar"><div class="bar-content"></div></div></td>'
            			+'<td class="state">等待上传</td>'
            		+'</tr>') 
        });
        
        uploader.on( 'uploadProgress', function( file, percentage ) {
            $("#"+file.id).find(".bar-content").css( 'width', percentage * 100 + '%' );  
        });

        uploader.on('uploadSuccess', function(file) {
            $('#' + file.id).find('.state').text('已上传');
        });

        uploader.on('uploadError', function(file) {
            $('#' + file.id).find('.state').text('上传出错');
            $('#' + file.id).find('.bar').addClass("error");
        });

        uploader.on('uploadComplete', function(file) {
            
        });

        $("#btnSync").on('click', function() {
            if ($(this).hasClass('disabled')) {
                return false;
            }
            uploader.upload();
        });
        </script>
	</body>
</html>